---
id: 61b093429e7fc020b43b1bb6
title: Schritt 76
challengeType: 0
dashedName: step-76
---

# --description--

Dein Ärmel sieht gut aus, aber er würde noch besser aussehen, wenn er mehr auf der rechten Seite der Markierung positioniert wäre. Eine Möglichkeit, dies zu tun, besteht darin, vor dem Ärmel ein weiteres Element hinzuzufügen, um es nach rechts zu schieben.

Füge einen neuen `div` mit der Klasse `cap` vor dem `div`-Ärmel-Element hinzu.

# --hints--

Dein neues `div`-Element sollte sich innerhalb der roten Markierung `div` befinden.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2);
```

Dein neues `div`-Element sollte eine Klasse von `cap` haben.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
assert(redMarkerChildren.some(child => child?.classList?.contains('cap')));
```

Deine Mütze `div` sollte vor dem Ärmel `div` stehen.

```js
const redMarkerChildren = [...document.querySelector('div.red')?.children];
const cap = document.querySelector('div.cap');
const sleeve = document.querySelector('div.sleeve');
assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      --fcc-editable-region--
      <div class="marker red">
        <div class="sleeve"></div>
      </div>
      --fcc-editable-region--
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

.sleeve {
  width: 110px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);
}

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
